import React, { useState } from 'react';
import { MailIcon, PhoneIcon, MapPinIcon, CheckCircleIcon } from 'lucide-react';
export const ContactUsPage = () => {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState('');
  const handleChange = e => {
    const {
      name,
      value
    } = e.target;
    setFormState(prev => ({
      ...prev,
      [name]: value
    }));
  };
  const handleSubmit = e => {
    e.preventDefault();
    setIsSubmitting(true);
    setError('');
    // Simulate form submission
    setTimeout(() => {
      setIsSubmitting(false);
      setIsSubmitted(true);
      // Reset form after submission
      setFormState({
        name: '',
        email: '',
        subject: '',
        message: ''
      });
    }, 1500);
  };
  return <div className="w-full bg-cream">
      {/* Header */}
      <section className="bg-white py-12">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              Contact Us
            </h1>
            <p className="font-inter text-gray-600">
              Have a question or feedback? We'd love to hear from you.
            </p>
          </div>
        </div>
      </section>
      {/* Contact Form and Info */}
      <section className="py-12">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-5xl mx-auto">
            <div className="flex flex-col md:flex-row bg-white rounded-lg shadow-sm overflow-hidden">
              {/* Contact Information */}
              <div className="w-full md:w-2/5 bg-terracotta/10 p-6 md:p-8">
                <h2 className="font-nunito font-semibold text-xl mb-6 text-dark">
                  Get in Touch
                </h2>
                <div className="space-y-6">
                  <div className="flex items-start">
                    <MapPinIcon size={20} className="text-terracotta mt-1 mr-3 flex-shrink-0" />
                    <div>
                      <h3 className="font-medium text-dark mb-1">
                        Our Address
                      </h3>
                      <p className="text-gray-600 text-sm">
                        123 Main Street, Suite 456
                        <br />
                        San Francisco, CA 94105
                        <br />
                        United States
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <MailIcon size={20} className="text-terracotta mt-1 mr-3 flex-shrink-0" />
                    <div>
                      <h3 className="font-medium text-dark mb-1">Email Us</h3>
                      <p className="text-gray-600 text-sm">
                        General Inquiries: hello@cubhousebuy.com
                        <br />
                        Press: press@cubhousebuy.com
                        <br />
                        Partnerships: partners@cubhousebuy.com
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <PhoneIcon size={20} className="text-terracotta mt-1 mr-3 flex-shrink-0" />
                    <div>
                      <h3 className="font-medium text-dark mb-1">Call Us</h3>
                      <p className="text-gray-600 text-sm">
                        +1 (555) 123-4567
                        <br />
                        Monday-Friday: 9am-5pm PT
                      </p>
                    </div>
                  </div>
                </div>
                <div className="mt-8">
                  <h3 className="font-medium text-dark mb-3">Follow Us</h3>
                  <div className="flex space-x-4">
                    <a href="#" className="text-gray-500 hover:text-terracotta transition-colors">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
                      </svg>
                    </a>
                    <a href="#" className="text-gray-500 hover:text-terracotta transition-colors">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
                      </svg>
                    </a>
                    <a href="#" className="text-gray-500 hover:text-terracotta transition-colors">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                      </svg>
                    </a>
                    <a href="#" className="text-gray-500 hover:text-terracotta transition-colors">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
              {/* Contact Form */}
              <div className="w-full md:w-3/5 p-6 md:p-8">
                {isSubmitted ? <div className="h-full flex flex-col items-center justify-center text-center">
                    <div className="bg-green/10 p-4 rounded-full mb-4">
                      <CheckCircleIcon size={48} className="text-green" />
                    </div>
                    <h2 className="font-nunito font-semibold text-xl mb-2 text-dark">
                      Message Sent!
                    </h2>
                    <p className="text-gray-600 mb-6">
                      Thank you for reaching out. We'll get back to you as soon
                      as possible.
                    </p>
                    <button onClick={() => setIsSubmitted(false)} className="px-4 py-2 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors">
                      Send Another Message
                    </button>
                  </div> : <>
                    <h2 className="font-nunito font-semibold text-xl mb-6 text-dark">
                      Send Us a Message
                    </h2>
                    <form onSubmit={handleSubmit}>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                        <div>
                          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                            Your Name
                          </label>
                          <input type="text" id="name" name="name" value={formState.name} onChange={handleChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-terracotta/30" />
                        </div>
                        <div>
                          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                            Your Email
                          </label>
                          <input type="email" id="email" name="email" value={formState.email} onChange={handleChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-terracotta/30" />
                        </div>
                      </div>
                      <div className="mb-4">
                        <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-1">
                          Subject
                        </label>
                        <input type="text" id="subject" name="subject" value={formState.subject} onChange={handleChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-terracotta/30" />
                      </div>
                      <div className="mb-6">
                        <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
                          Message
                        </label>
                        <textarea id="message" name="message" rows={5} value={formState.message} onChange={handleChange} required className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-terracotta/30"></textarea>
                      </div>
                      {error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
                          {error}
                        </div>}
                      <button type="submit" disabled={isSubmitting} className={`w-full px-4 py-3 bg-terracotta text-white rounded-md font-medium transition-colors ${isSubmitting ? 'opacity-70 cursor-not-allowed' : 'hover:bg-terracotta/90'}`}>
                        {isSubmitting ? 'Sending...' : 'Send Message'}
                      </button>
                    </form>
                  </>}
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* FAQ Section */}
      <section className="py-12">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto">
            <h2 className="font-nunito font-semibold text-2xl text-dark mb-6 text-center">
              Frequently Asked Questions
            </h2>
            <div className="space-y-4">
              <div className="bg-white p-5 rounded-lg shadow-sm">
                <h3 className="font-medium text-lg mb-2">
                  How can I join the Cub Club community?
                </h3>
                <p className="text-gray-600">
                  You can join our Cub Club community by clicking the "Join Cub
                  Club" button in the navigation menu and completing the
                  registration form. Membership is free and gives you access to
                  exclusive content and community features.
                </p>
              </div>
              <div className="bg-white p-5 rounded-lg shadow-sm">
                <h3 className="font-medium text-lg mb-2">
                  How do I become a product tester?
                </h3>
                <p className="text-gray-600">
                  We're always looking for parents to join our testing program.
                  You can apply by visiting the "Join Our Testing Program" page
                  and filling out the application form. Our team reviews
                  applications regularly and will contact you if you're
                  selected.
                </p>
              </div>
              <div className="bg-white p-5 rounded-lg shadow-sm">
                <h3 className="font-medium text-lg mb-2">
                  Do you have affiliate partnerships with the products you
                  recommend?
                </h3>
                <p className="text-gray-600">
                  Yes, we do participate in affiliate programs, which means we
                  may earn commissions when you purchase through our links.
                  However, this never influences our product recommendations.
                  Please see our Advertiser Disclosure page for more details.
                </p>
              </div>
              <div className="bg-white p-5 rounded-lg shadow-sm">
                <h3 className="font-medium text-lg mb-2">
                  How often do you update your product recommendations?
                </h3>
                <p className="text-gray-600">
                  We review and update our guides and recommendations at least
                  quarterly, and more frequently when new products are released
                  or safety standards change. The "Last Updated" date at the top
                  of each guide indicates when it was last reviewed.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>;
};